<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .con {
            border: 1px solid #000000;
            width: 500px;
            height: 600px;
            text-align: center;
            position: relative;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
 
        .con>div {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
            box-shadow: 2px 2px 2px #cccccc;
            float: left;
            margin: 11px;
            text-align: center;
            font-size: 40px;
            line-height: 100px;
            user-select: none;
        }
 
        .con>input {
            width: 90%;
            height: 30px;
            line-height: 30px;
            font-size: 25px;
            text-align: right;
            margin-top: 20px;
            margin-bottom: 20px;
            box-shadow: 3px 3px 3px #cccccc;
            outline: none;
            padding: 5px 10px;
            background-color: white;
            border: 1px solid #000000;
        }
 
        .clear::after {
            content: "";
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
        }
 
        .clear {
            zoom: 1;
        }
    </style>
</head>
 
<body>
    <div class="con clear">
        <input type="text" id="input" value="0" disabled />
        <div class="divs" id="div1">7</div>
        <div class="divs" id="div2">8</div>
        <div class="divs" id="div3">9</div>
        <div class="divs" id="div4">-</div>
        <div class="divs" id="div5">4</div>
        <div class="divs" id="div6">5</div>
        <div class="divs" id="div7">6</div>
        <div class="divs" id="div8">+</div>
        <div class="divs" id="div9">1</div>
        <div class="divs" id="div10">2</div>
        <div class="divs" id="div11">3</div>
        <div class="divs" id="div12">*</div>
        <div class="divs" id="div13">C</div>
        <div class="divs" id="div14">0</div>
        <div class="divs" id="div15">=</div>
        <div class="divs" id="div16">/</div>
    </div>
    <script>
        /* 
            1、必须有一个入口函数，执行入口函数，代码执行，不执行入口函数，不会执行任何内容
            2、必须讲全局变量设置在如果函数执行的上面，必须分三类，没有初始值，有初始值，常量，尽量减少全局变量的使用
        */
 
        var input, // 显示计算器输入内容
            con,  // 父元素使用事件委托绑定事件
            result, // 存储计算结果
            sentence = ''; // 将 input中计算器输入内容视为 字符串代码，最终会被 eval(sentence) 运行
 
        init();
        function init() {
            input = document.querySelector("input");
            con = document.querySelector(".con");
            con.addEventListener("click", clickHandler);
        }
 
        function clickHandler(e) {
            if (e.target.className !== "divs") return;
            switch (e.target.innerHTML) {
                case "+":
                case "-":
                case "*":
                case "/":
                    setSymbol(e.target.innerHTML);
                    break;
                case "=":
                    computeResult();
                    break;
                case "C":
                    clear();
                    break;
                default:
                    setValue(e.target.innerHTML);
            }
        }
 
        function isNotCanSetSymbol() {
            const isNullSentence = sentence === '';
 
            // sentence 最后的字符若是 加减乘除，则无法 再次点击 加减乘除
            const sentenceLastCharIsSymbol = ['+', '-', '*', '/'].includes(sentence[sentence.length - 1]);
             
            return [
                isNullSentence,
                sentenceLastCharIsSymbol,
            ].some(Boolean);
        }
 
        function setSymbol(_type) {
            // 若 sentence 最后的字符是 加减乘除，则不能 setSymbol;
            if (isNotCanSetSymbol()) {
                return;
            }
 
            // 若有 result，则在 result 基础上进行「拼接」，并清除 result
            if (result) {
                sentence = `${result}${_type}`;
                result = '';
                setInputValue();
                return;
            }
 
            // 默认做符号「拼接」
            sentence += _type;
            setInputValue();
        }
 
        function computeResult() {
            if (sentence.includes('=')) {
                return;
            }
            result = eval(sentence); //   运行 sentence 的字符串代码
            sentence = `${result}`;
            setInputValue();
        }
 
        function clear(initValue = '0') {
            sentence=initValue;
            result="";
            setInputValue();
        }
 
        function setValue(value) {
            // 若有 result，则将 sentence 清空，再做「拼接」。
            if(result){
                clear('');
            }
 
            sentence += `${value}`
 
            if (sentence.startsWith('00')) {
                sentence = '';
                return
            }
 
            setInputValue();
        }
 
        function setInputValue() {
            input.value = sentence;
        }
    
    </script>
</body>
 
</html>